<template>
    <div class="app-container">
        <div class="rank">
            <div class="title">每月阅读榜</div>
            <div class="content">
                <div class="c_top">
                    <div class="item" v-for="(item,index) in monthList.first" :key="index" @click="goToInfo(item.fileid,item.bookName)">
                        <span class="item-label"></span>
                        <div class="item-right">
                            <span class="item-cover" :style="'backgroundImage:url('+item.imgurl+')'"></span>
                            <span class="item-name" v-html="item.bookName"></span>
                        </div>
                    </div>
                </div>
                <div class="c_bottom">
                    <div class="item" v-for="(item,index) in monthList.last" :key="index" @click="goToInfo(item.fileid,item.bookName)">
                        <span class="item-label">{{index+4}}</span>
                        <div class="item-right">
                            <span class="item-cover" :style="'backgroundImage:url('+item.imgurl+')'"></span>
                            <span class="item-name" v-html="item.bookName">生而不凡</span>
                            <span class="item-author">{{item.author}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rank">
            <div class="title">图书收藏榜</div>
            <div class="content">
                <div class="c_top">
                    <div class="item" v-for="(item,index) in collectionList.first" :key="index" @click="goToInfo(item.fileid,item.bookName)">
                        <span class="item-label"></span>
                        <div class="item-right">
                            <span class="item-cover" :style="'backgroundImage:url('+item.imgurl+')'"></span>
                            <span class="item-name" v-html="item.bookName"></span>
                        </div>
                    </div>
                </div>
                <div class="c_bottom">
                    <div class="item" v-for="(item,index) in collectionList.last" :key="index" @click="goToInfo(item.fileid,item.bookName)">
                        <span class="item-label">{{index+4}}</span>
                        <div class="item-right">
                            <span class="item-cover" :style="'backgroundImage:url('+item.imgurl+')'"></span>
                            <span class="item-name" v-html="item.bookName">生而不凡</span>
                            <span class="item-author">{{item.author}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rank">
            <div class="title">好书推荐榜</div>
            <div class="content">
                <div class="c_top">
                    <div class="item" v-for="(item,index) in selectList.first" :key="index" @click="goToInfo(item.fileid,item.bookName)">
                        <span class="item-label"></span>
                        <div class="item-right">
                            <span class="item-cover" :style="'backgroundImage:url('+item.imgurl+')'"></span>
                            <span class="item-name" v-html="item.bookName"></span>
                        </div>
                    </div>
                </div>
                <div class="c_bottom">
                    <div class="item" v-for="(item,index) in selectList.last" :key="index" @click="goToInfo(item.fileid,item.bookName)">
                        <span class="item-label">{{index+4}}</span>
                        <div class="item-right">
                            <span class="item-cover" :style="'backgroundImage:url('+item.imgurl+')'"></span>
                            <span class="item-name" v-html="item.bookName">生而不凡</span>
                            <span class="item-author">{{item.author}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {monthRankings,collectionRankings,selectRankings } from '@/api/index'
import utils from '@/utils/index'
export default {
  data() {
    return {
      list: [
        {
          title: "每月阅读榜"
        },
        {
          title: "好书推荐榜"
        },
        {
          title: "新书推荐榜"
        }
      ],
      monthList:{
        first:[],
        last:[]
      },
      collectionList:{
        first:[],
        last:[]
      },
      selectList:{
        first:[],
        last:[]
      }
    };
  },
  components: {},
  created(){
    console.log(utils.monthDay())
    this.init()
  },
  methods:{
     goToInfo(bookId,bookName) {
        this.$router.push("/book/info?bookId="+bookId+"&bookName="+bookName);
      },
    init(){
      monthRankings().then(res=>{
        let list = res.data.date.list
        this.monthList.first = list.splice(0,3);
        this.monthList.last = list
        // console.log(res.data.date)
      }).catch(err=>{

      });
      collectionRankings().then(res=>{
        let list = res.data.date.list
        let str = 'http://10.2.175.86/res/file/'
        list.forEach(element => {
            element.imgurl = element.imgurl.replace(str,'http://180.97.46.193/res/file/')
        });
        this.collectionList.first = list.splice(0,3);
        this.collectionList.last = list
        console.log(res.data.date)
      }).catch(err=>{
      });
      selectRankings().then(res=>{
              let list = res.data.date.list
              this.selectList.first = list.splice(0,3);
              this.selectList.last = list
              // console.log(res.data.date)
            }).catch(err=>{

            });
    }
  }
};
</script>
<style lang="less" scoped>
.rank {
  padding: 18px 30px;
  .title {
    margin-bottom: 24px;
    background: url("/static/images/rank/every.png") no-repeat;
    background-position: center;
    height: 75px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: #fff;
  }
  .content {
    padding: 24px 0 0 0;
    border-bottom: 1px solid #f1f1f1;
    .c_top {
      padding-left: 26px;
      padding-bottom: 18px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      .item:not(:first-child) {
        margin-left: 110px;
      }
      .item:nth-child(2) {
        .item-label {
          background: url("/static/images/rank/t1.png") no-repeat;
          width: 30px;
          height: 42px;
          display: block;
          margin-right: 20px;
        }
        .item-right {
          width: 140px;
          .item-cover {
            width: 140px;
            height: 188px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.4);
          }
        }
      }
      .item:nth-child(3) {
        .item-label {
          background: url("/static/images/rank/t3.png") no-repeat;
          width: 30px;
          height: 42px;
          display: block;
          margin-right: 20px;
        }
      }
      .item {
        display: flex;
        cursor: pointer;
        .item-label {
          background: url("/static/images/rank/t2.png") no-repeat;
          width: 30px;
          height: 42px;
          display: block;
          margin-right: 20px;
        }
        .item-right {
          width: 114px;
          .item-cover {
            width: 114px;
            height: 154px;
            box-shadow: 1px 1px 1px #c1c1c1 ;
            background: url("/static/images/base/book.png") no-repeat;
            background-size: cover;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.4);
            display: block;
          }
          .item-name {
            margin-top: 10px;
            font-size: 16px;
            display: block;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .c_bottom {
      padding: 20px 0;
      display: flex;
      flex-flow: row; /*伸缩项目单行排列*/
      .item:not(:first-child) {
        margin-left: 33px;
      }
      .item {
        display: flex;
        cursor: pointer;
        .item-label {
          display: block;
          width: 22px;
          font-family: "AdobeHeitiStd-Regular";
          font-size: 18px;
          text-align: center;
          line-height: 22px;
          height: 22px;
          background: #eeeeee;
          margin-right: 20px;
        }
        .item-right {
          width: 99px;
          .item-cover {
            width: 99px;
            height: 132px;
            box-shadow: 1px 1px 1px #c1c1c1 ;
            background: url("/static/images/base/book.png") no-repeat;
            background-size: cover;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.4);
            display: block;
          }
          .item-name {
            font-size: 14px;
            margin-top: 10px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .item-author {
            margin-top: 10px;
            display: block;
            font-size: 10px;
            color: #999a9b;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
.rank:nth-child(2) {
  .title {
    background: url("/static/images/rank/good.png") no-repeat;
    margin-bottom: 24px;
    background-position: center;
    height: 75px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: #fff;
  }
}
.rank:nth-child(3) {
  .title {
    background: url("/static/images/rank/new.png") no-repeat;
    margin-bottom: 24px;
    background-position: center;
    height: 75px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: #fff;
  }
  .content {
    border-bottom: none;
  }
}
</style>


